<template>
  <div class="excel-import-export-container">
    <el-card class="excel-card">
      <template #header>
        <div class="card-header">
          <span>${domainObjectName}数据导入导出</span>
        </div>
      </template>
      
      <el-row :gutter="20">
        <!-- 导入区域 -->
        <el-col :span="12">
          <el-card shadow="hover" class="inner-card">
            <template #header>
              <div class="inner-card-header">
                <span>Excel导入</span>
              </div>
            </template>
            <div class="upload-area">
              <el-upload
                class="upload-demo"
                drag
                :action="uploadAction"
                :headers="uploadHeaders"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :show-file-list="false"
                accept=".xlsx, .xls"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  将Excel文件拖到此处，或<em>点击上传</em>
                </div>
                <template #tip>
                  <div class="el-upload__tip">
                    请上传Excel文件(.xlsx, .xls)，大小不超过10MB
                  </div>
                </template>
              </el-upload>
              
              <div class="operation-btns">
                <el-button type="primary" @click="downloadTemplate">
                  <el-icon><download /></el-icon>
                  下载导入模板
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <!-- 导出区域 -->
        <el-col :span="12">
          <el-card shadow="hover" class="inner-card">
            <template #header>
              <div class="inner-card-header">
                <span>Excel导出</span>
              </div>
            </template>
            <div class="export-area">
              <el-form :model="exportForm" label-width="120px">
                <el-form-item label="导出条件：">
                  <el-input 
                    v-model="exportForm.keyword" 
                    placeholder="请输入关键词" 
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="exportData">
                    <el-icon><download /></el-icon>
                    导出数据
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 导入结果 -->
      <el-card v-if="importResult.show" shadow="hover" class="result-card">
        <template #header>
          <div class="inner-card-header">
            <span>导入结果</span>
            <el-button type="text" @click="importResult.show = false">
              <el-icon><close /></el-icon>
            </el-button>
          </div>
        </template>
        <div class="result-content">
          <el-result
            :icon="importResult.success ? 'success' : 'error'"
            :title="importResult.title"
            :sub-title="importResult.message"
          >
            <template #extra>
              <el-button type="primary" @click="importResult.show = false">确定</el-button>
            </template>
          </el-result>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { UploadFilled, Download, Close } from '@element-plus/icons-vue'

export default {
  name: '${domainObjectName}ExcelImportExport',
  components: {
    UploadFilled,
    Download,
    Close
  },
  setup() {
    // 上传相关
    const uploadAction = import.meta.env.VITE_API_BASE_URL + '/api/v1/${domainObjectName?lower_case}/excel/import'
    const uploadHeaders = {
      // 如果需要认证，在这里添加token等
    }
    
    // 导出表单
    const exportForm = reactive({
      keyword: ''
    })
    
    // 导入结果
    const importResult = reactive({
      show: false,
      success: false,
      title: '',
      message: ''
    })
    
    // 上传前验证
    const beforeUpload = (file) => {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                      file.type === 'application/vnd.ms-excel'
      const isLt10M = file.size / 1024 / 1024 < 10
      
      if (!isExcel) {
        ElMessage.error('上传文件只能是Excel格式！')
        return false
      }
      
      if (!isLt10M) {
        ElMessage.error('上传文件大小不能超过10MB！')
        return false
      }
      
      return true
    }
    
    // 上传成功回调
    const handleUploadSuccess = (response) => {
      if (response.code === 200) {
        importResult.success = true
        importResult.title = '导入成功'
        importResult.message = response.message || `成功导入 ${response.data} 条数据`
      } else {
        importResult.success = false
        importResult.title = '导入失败'
        importResult.message = response.message || '数据导入过程中发生错误'
      }
      importResult.show = true
    }
    
    // 上传失败回调
    const handleUploadError = (error) => {
      console.error('上传失败', error)
      importResult.success = false
      importResult.title = '导入失败'
      importResult.message = '文件上传过程中发生错误，请重试'
      importResult.show = true
    }
    
    // 下载模板
    const downloadTemplate = () => {
      window.location.href = import.meta.env.VITE_API_BASE_URL + '/api/v1/${domainObjectName?lower_case}/excel/template'
    }
    
    // 导出数据
    const exportData = () => {
      let url = import.meta.env.VITE_API_BASE_URL + '/api/v1/${domainObjectName?lower_case}/excel/export'
      
      // 添加查询参数
      if (exportForm.keyword) {
        url += `?keyword=${encodeURIComponent(exportForm.keyword)}`
      }
      
      // 使用window.open在新标签页打开下载链接
      window.open(url, '_blank')
    }
    
    return {
      uploadAction,
      uploadHeaders,
      exportForm,
      importResult,
      beforeUpload,
      handleUploadSuccess,
      handleUploadError,
      downloadTemplate,
      exportData
    }
  }
}
</script>

<style scoped>
.excel-import-export-container {
  padding: 20px;
}

.excel-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.inner-card {
  height: 100%;
  margin-bottom: 20px;
}

.inner-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.upload-area,
.export-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.operation-btns {
  margin-top: 20px;
}

.result-card {
  margin-top: 20px;
}

.result-content {
  text-align: center;
}
</style> 